<template>
  <div class="container">
    <div class="banner">
      <!-- logo -->
      <a href=""
        ><div class="logo"><img src="/images/logo.png" alt="" /></div
      ></a>
      <div class="nav_content">
        <ul>
          <li class="pop_menu">
            <span>小米手机</span>
            <div class="pop">
              <ul>
                <li class="goods" v-for="item in phonelist" :key="item.id">
                  <a :href="`#/detail/${item.id}`">
                    <div class="goods_img">
                      <img v-lazy="item.s_goods_photos[0].path" src="" alt="" />
                    </div>
                    <div class="goods_name">
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="goods_price">
                      <span>{{ item.price }}元</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="pop_menu">
            <span>Redmi红米</span>
            <div class="pop">
              <ul>
                <li class="goods" v-for="item in phonelist" :key="item.id">
                  <a :href="`#/detail/${item.id}`">
                    <div class="goods_img">
                      <img v-lazy="item.s_goods_photos[0].path" src="" alt="" />
                    </div>
                    <div class="goods_name">
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="goods_price">
                      <span>{{ item.price }}元</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="pop_menu">
            <span>电视</span>
            <div class="pop">
              <ul>
                <li class="goods" v-for="item in tvList" :key="item.id">
                  <a :href="`#/detail/${item.id}`">
                    <div class="goods_img">
                      <img v-lazy="item.s_goods_photos[0].path" src="" alt="" />
                    </div>
                    <div class="goods_name">
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="goods_price">
                      <span>{{ item.price }}元</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="pop_menu">
            <span>笔记本</span>
            <div class="pop">
              <ul>
                <li class="goods" v-for="item in tvList" :key="item.id">
                  <div class="goods_img">
                    <img v-lazy="item.s_goods_photos[0].path" src="" alt="" />
                  </div>
                  <div class="goods_name">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="goods_price">
                    <span>{{ item.price }}元</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="pop_menu">
            <span>平板</span>
            <div class="pop">
              <ul>
                <li class="goods" v-for="item in phonelist" :key="item.id">
                  <div class="goods_img">
                    <img v-lazy="item.s_goods_photos[0].path" src="" alt="" />
                  </div>
                  <div class="goods_name">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="goods_price">
                    <span>{{ item.price }}元</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="pop_menu">
            <span>家电</span>
          </li>
          <li class="pop_menu">
            <span>路由器</span>
          </li>
          <li class="pop_menu">
            <span>智能硬件</span>
          </li>
          <li class="pop_menu">
            <span>服务</span>
          </li>
          <li class="pop_menu">
            <span>社区</span>
          </li>
        </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <div class="text">
          <input type="text" class="shuru" placeholder="小米11" />
        </div>
        <div class="submit">
          <input type="submit" class="sousuo" value="" />
          <img src="/images/search.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods } from "@/assets/js/request.js";
export default {
  data() {
    return {
      goodslist: [],
      phonelist: [],
      tvList: [],
    };
  },
  async created() {
    //小米手机
    let phone = await getGoods(5);
    this.goodslist = phone.rows;
    this.phonelist = phone.rows.slice(0, 6);
    // console.log(this.phonelist);
    //电视
    let tv = await getGoods(15);
    this.goodslist = tv.rows;
    this.tvList = tv.rows.slice(0, 6);
    // console.log(this.tvList);
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
@import "@/assets/scss/reset.scss";

.banner {
  min-width: 1232px;
  height: 100px;
  padding-top: 10px;
  margin: 0 auto;
  margin-bottom: 20px;
  position: relative;
  .logo {
    position: absolute;
    left: 10%;
    float: left;
    margin: 20px 0;
    .logo img {
      width: 60px;
      height: 60px;
    }
  }
  .nav_content {
    width: 60%;
    height: 100px;
    display: flex;
    position: absolute;
    left: 15%;
    font-size: 16px;
    ul {
      display: flex;
      margin: 0 auto;
      .pop_menu {
        float: left;
        height: 100px;
        margin: 40px 10px;
        a {
          display: inline-block;
          color: #000;
          font-size: 16px;
          padding: 0 10px;
        }
        &:hover {
          color: #ff6600;
          .pop {
            height: 250px;
            display: block;
            z-index: 999;
            opacity: 1;
          }
        }
        .pop {
          overflow: hidden;
          // display: block;
          background-color: white;
          z-index: 20;
          opacity: 0;
          width: 1280px;
          height: 0px;
          transition: all 1s;
          position: absolute;
          top: 110px;
          left: -12%;
          margin: 0 auto;
          border-top: 1px solid #e5e5e5;
          box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
          // overflow: hidden;
          ul {
            position: absolute;
            right: 4%;
          }

          .goods {
            width: 200px;
            height: 220px;
            position: relative;
            z-index: 30;

            // top: 20px;
            img {
              // width: auto;
              height: 100px;
              margin-top: 20px;
              cursor: pointer;
            }

            .goods_img {
              height: 120px;
            }

            .goods_name {
              margin-top: 20px;
              font-size: 14px;
              line-height: 35px;
              color: #333333;
              // display: block;
            }

            .goods_price {
              line-height: 40px;
              font-size: 14px;
              color: #ff6600;
            }

            &:before {
              content: " ";
              position: absolute;
              top: 28px;
              right: 0px;
              border-right: 1px solid #d7d7d7;
              height: 100px;
              width: 1px;
            }

            &:last-child::before {
              display: none;
            }
          }
        }
      }
    }
  }

  .search {
    display: flex;
    width: 30%;
    height: 80px;
    line-height: 100px;
    float: right;
    position: absolute;
    right: 0%;
    .text {
      width: 250px;
      height: 50px;
      line-height: 50px;
      font-size: 12px;
      margin-top: 25px;
      border: 1px solid #ccc;
      float: left;
    }
    .text:hover {
      border-color: #ff6700;
    }
    .text .shuru {
      border: none;
      width: 250px;
      height: 30px;
      padding-left: 10px;
    }
    .submit {
      float: left;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 12px;
      margin-top: 25px;
      border: 1px solid #ccc;
    }
    .submit .sousuo {
      letter-spacing: 3px;
      text-align: center;
      width: 40px;
      height: 40px;
      border: none;
      cursor: pointer;
      // background-image: url(/images/search.png);
      background-repeat: no-repeat;
      position: relative;
    }
    .submit img {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 37%;
      top: 45%;
    }
    .submit:hover {
      border-color: #ff6700;
      color: #ff6700;
    }
    .submit:focus {
      border-color: #ff6700;
      color: #ff6700;
    }
  }
}
</style>